<template>
	<view>
		<view class="card">
			<view class="card-top">
				<view>{{detail.transferReason}}</view>
				<view style="flex:1;margin-left: 30rpx;">
					<van-tag type="success" v-if="detail.nowStatus=='PASS'">已通过</van-tag>
					<van-tag type="danger" v-if="detail.nowStatus=='REJECT'">未通过</van-tag>
					<van-tag color="#e1e1e1" v-if="detail.nowStatus=='CANCEL'">取消</van-tag>
					<van-tag type="primary" v-if="detail.nowStatus=='PROCESSING'">审批中</van-tag>
				</view>
			</view>
			<view class="info">
				<view class="infoItem">申请时间：{{detail.createTime}}</view>
				<view class="infoItem">原单位：{{detail.oldYardName}}</view>
				<view class="infoItem">原部门：{{detail.oldDeptName}}</view> 
				<!-- <view class="infoItem">原职级：{{detail.yardName}}</view> -->
				<view class="infoItem">新单位：{{detail.newYardName}}</view>
				<view class="infoItem">新部门：{{detail.newDeptName}}</view> 
				<!-- <view class="infoItem">新职级：{{detail.yardName}}{{detail.deptName}}</view> -->
				<view class="infoItem">备注：{{detail.remark}}</view>  
				<view class="infoItem">说明附件：</view>
				<view v-if="annex.length>0">
					<view class="image-box w-full">
						<view v-for="(image, index) in annex" class="item items-center">
							<van-image
								:src="image"
								class="item"
								width="100"
								height="100"
								cover
								@click="handlePreview(image)"
							/> 
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card shcard">
			<view style="padding:10rpx 0 ;font-weight: 700;font-size: 30rpx;">审批流程</view>
			<view class="stepbox">
				<view class="stepItem">
					<view  class="avatarBox">
						<image :src="userInfo.avatar?userInfo.avatar:'../../static//images/noavatar.png'"
							mode="scaleToFill" class="avatar" />
						<view class="iconBox">
							<van-icon name="checked" size='19' color='#11BF71' />
						</view>
					</view>
					<view class="person">
						<view style="display: flex;">
							<view style="flex: 1;">发起申请</view> 
						</view>
						<view class="nickname">我</view>
					</view>
				</view>
				<view class="stepItem" v-for="(item,index) in stepPerson" :key="index">
					<view  class="avatarBox">
						<image :src="item.avatar?item.avatar:'../../static//images/noavatar.png'" mode="scaleToFill"
							class="avatar" />
						<view class="iconBox">
							<van-icon name="checked" size='19' color='#11BF71' v-if="item.handler=='PASS'"/>
							<van-icon name="more" size='19' color='#409eff' v-if="item.handler==''"/>
							<van-icon name="clear" size='19' color='#ff0000' v-if="item.handler=='REJECT'"/> 
						</view>
					</view>
					<view class="person"> 
						<view style="display: flex;align-items: center;">
							<view style="flex: 1;">{{item.nodeTitle}}</view>
							<view style="color: #8d8d8d;font-size: 24rpx;font-weight: 400;">{{item.handlerTime}}</view>
						</view>
						<view class="nickname">{{item.realityUserName}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bynBox" v-if="type==1">
			<van-button type='primary' class="w-full" plain @click='cencel()' v-if="detail.nowStatus=='PROCESSING'&&detail.startUserId==userInfo.id">撤销</van-button>
		</view>
		<view class="bynBox" v-if="type==2">
			<view style="flex:1">
				<van-button type='danger' class="w-full" plain @click='reject()'>驳回</van-button>
			</view>
			<view style="width: 50rpx;"></view>
			<view  style="flex:1">
				<van-button type='primary' class="w-full"  @click='pass()'>通过</van-button>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		dailyTransferApproveDetail,  
		flwReject,
		flwPass
	} from "@/api"
	
	import { USER_INFO_KEY } from "@/enums/cacheEnum" 
	const detail = ref('')
	const annex=ref([])  
    const userInfo = ref(cache.get(USER_INFO_KEY))
	const stepPerson=ref([])
	const type=ref(null) //1 提交  2 审批
	onLoad(async (options) => {
		const res = await dailyTransferApproveDetail({
			id: options.id, 
		})
		type.value=options.type
		detail.value = res.data
		stepPerson.value=res.data.flwNodeDetailJson
		if(res.data.annex){
			annex.value=res.data.annex.split(",")
		}

	})
    const reject=()=>{
		flwReject({
			id:detail.value.id
		}).then(res=>{
			if(res.code==200){
				uni.showToast({
					title:'操作成功',
					
				})
			}
		})
	}
	const pass=()=>{
		flwPass({
			id:detail.value.id
		}).then(res=>{
			if(res.code==200){
				
			}
		})
	}
</script>

<style lang="scss" scoped>
	.bynBox {
		width: 690rpx;
		margin: 50rpx auto;
		display: flex; 
	}
	
	.card {
		width: 690rpx;
		background: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		padding: 20rpx 24rpx;
	}

	.card-top {
		display: flex;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #e1e1e1;
	}

	.infoItem {
		padding-bottom: 20rpx;
	}

	.info {
		padding-top: 30rpx;
	}

	.stepbox {
		padding: 30rpx 0;
		margin: 0 auto;
		box-sizing: border-box;

		.stepItem {
			display: flex;
			align-items: center;
			padding-bottom: 100rpx;
			position: relative;

			&::after {
				content: '';
				width: 5rpx;
				height: 80rpx;
				background: #e1e1e1;
				position: absolute;
				bottom: 10rpx;
				left: 42rpx;
			}

			&:nth-last-child(1) {
				padding-bottom: 0;

				&::after {
					display: none;
				}
			}
			.avatarBox{
				width: 90rpx;
				height: 90rpx;
				display: block;
				position: relative;
				.iconBox{
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					bottom: 0;
					right: 0;
					background: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.avatar {
				width: 90rpx;
				height: 90rpx;
				display: block;

				image {
					width: 90rpx;
					height: 90rpx;
					display: block;
					border-radius: 10rpx;
				}

			}

			.person {
				padding-left: 40rpx;
				font-size: 28rpx;
				font-weight: 700;
                flex: 1;
				.nickname {
					color: #8d8d8d;
					font-weight: 400;
					padding-top: 10rpx;
				}
			}
		}
	}
	.image-box {
		display: flex;
		flex-wrap: wrap; 
		padding-bottom: 20rpx;
		.item {
			flex: 0 0 100px;
			margin-right: 10rpx;
			position: relative;
			.icon {
				position: absolute;
				top: 0%;
				right: 20rpx;
				z-index: 999;
				background-color: #ee0a24;
			}
		}
	}
	.flie-box {
		width: calc(100% - 200rpx);
		margin-left: 20rpx;
	}
	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		flex: 0 0 100px;
		text-align: center;
		border: 1rpx dashed $uni-border-color;
	}
</style>